<template>
  <div class="tablist">
    <el-table :data="table.data" stripe :border="true" v-loading="loading" element-loading-text="数据加载中..." style="width: 100%;">

      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column v-for="(col,index) in columns" :key="index" :prop="col.key" header-align="center" :type="col.type ? 'index':''" :label="col.title" :formatter="col.formatter"></el-table-column>

      <!--操作栏-->
      <el-table-column v-if="buttonGroup.length > 0" fixed="right" label="操作" header-align="center">
        <template slot-scope="scope">
          <div class="btn-table" v-for="(item,index) in buttonGroup" :key="index">
            <el-button v-if="formatters(item,scope.row)" v-has="item.code" plain size="mini" :type="item.type" :icon="item.icon" @click="hangdleEvent(item.incident,scope.$index,scope.row)">{{item.name}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination background :current-page="pagination.search.pageIndex" :page-sizes="pagination.sizes" :page-size="pagination.search.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="pageSizeChange" @current-change="pageCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    apiUrl: {
      type: [Number, String]
    },
    search: {
      type: Object
    },
    buttonGroup: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      table: {
        data: [],
        height: 0
      },
      pagination: {
        total: 0,
        sizes: [20, 40, 80, 100],
        search: {
          pageIndex: 1,
          pageSize: 20
        }
      },
      loading: false
    };
  },
  created() {
    this.load();
  },
  computed: {
    //按钮
    formatters() {
      return function(item, row) {
        if (item.formatters) {
          return item.formatters(row);
        } else {
          return true;
        }
      };
    }
  },
  methods: {
    load: function() {
      //合并搜索条件
      var temp = Object.assign({}, this.search, this.pagination.search);
      this.$api.get(this.apiUrl, temp).then(rsp => {
        if (rsp != false) {
          this.table.data = rsp.data.records;
          this.pagination.total = rsp.data.total;
        }
      });
    },

    initload: function() {
      this.pagination.search.pageIndex = 1;
      var temp = Object.assign({}, this.search, this.pagination.search);
      this.$api.get(this.apiUrl, temp).then(rsp => {
        if (rsp != false) {
          this.table.data = rsp.data.records;
          this.pagination.total = rsp.data.total;
        }
      });
    },

    pageSizeChange(pagesize) {
      this.pagination.search.pageSize = pagesize;
      this.load();
    },

    pageCurrentChange(pageindex) {
      this.pagination.search.pageIndex = pageindex;
      this.load();
    },
    hangdleEvent(incident, index, row) {
      this.$emit("buttonEvent", incident, index, row);
    }
  }
};
</script>
<style>
.tablist {
  margin-top: 10px !important;
  margin-bottom: 30px !important;
}
th {
  background-color: rgba(58, 75, 96, 0.1) !important;
  /* color:#000!important; */
}
.el-button {
  display: inline-block;
}
.btn-table {
  display: inline-block;
  margin-right: 5px;
}
</style>
